import {Card, Col, DatePicker, Row, Statistic} from 'antd';
import React, {FC} from 'react';
import { useEffect, useState} from 'react';
import { GridContent } from '@ant-design/pro-layout';
import {queryDefaultData} from './service';
import {Suspense} from "react";
import PageLoading from "@/pages/m/Analyse/components/PageLoading";
import ChartCard from "./components/ChartCard";
import dayjs from "dayjs";
import { ProCard } from '@ant-design/pro-card';
import type {TargetType} from "@/pages/m/Analyse/data";
import MonthlyChart from "@/pages/m/Analyse/components/Echarts/MonthlyChart";
import YearlyChart from "@/pages/m/Analyse/components/Echarts/YearlyChart";
import numeral from "numeral";
import ThisWeekChart from "@/pages/m/Analyse/components/Echarts/ThisWeekChart";
import IncomeTypePieChart from "@/pages/m/Analyse/components/Echarts/IncomeTypePieChart";
import YearPaymentPieChart from "@/pages/m/Analyse/components/Echarts/YearPaymentPieChart";
import MonthPaymentPieChart from "@/pages/m/Analyse/components/Echarts/MonthPaymentPieChart";
import MonthFamilyPaymentPieChart from "@/pages/m/Analyse/components/Echarts/MonthFamilyPaymentPieChart";
import YearFamilyPaymentPieChart from "@/pages/m/Analyse/components/Echarts/YearFamilyPaymentPieChart";
import MonthIncomeTypePieChart from "@/pages/m/Analyse/components/Echarts/MonthIncomeTypePieChart";
import {CustomTabs} from "@/pages/m/CustomTabs";
import IncomeTypeBarChart from "@/pages/m/Analyse/components/Echarts/IncomeTypeBarChart";
import {NavBar} from "antd-mobile";


const Monitor: FC = () => {
  // 日期格式化
  const monthFormatStr = 'YYYY年MM月';
  const monthFormat = 'YYYY-MM';
  const yearFormat = 'YYYY';

  // 月份选择
  const [monthStr, setMonthStr] = useState<string>(dayjs(`${new Date()}`).format(monthFormatStr))
  const [month, setMonth] = useState<string>(dayjs(`${new Date()}`).format(monthFormat))

  // 年份选择
  const [year, setYear] = useState<string>(dayjs(`${new Date()}`).format(yearFormat))

  const [data, setData] = useState<TargetType>({
    topCard: {
      totalIncome: 0,
      totalPayment: 0,
      totalOwe: 0,
      totalLend : 0,
    },
    thisWeek: {
      totalIncome: 0,
      totalPayment: 0,
    },
    thisMonth: {
      totalIncome: 0,
      totalPayment: 0,
    },
  })

  // 根据年份获取后端数据
  useEffect(()=>{
    queryDefaultData({year: year}).then((res) => {
      if (res.status === "done") {
        setData(res.data)
      }
    });
  }, [year])

  const topColResponsiveProps = {
    xs: 12,
    sm: 6,
    md: 6,
    lg: 6,
    xl: 6,
  };
  const right = (
    <div style={{fontSize: 24}}>
      <Row>
        <>
          <DatePicker
            style={{ width: `100%`, height: 35}}
            // @ts-ignore
            value={dayjs(year, yearFormat)}
            format={yearFormat}
            picker={"year"}
            onChange={(value)=>{
              if (value) {
                setYear(dayjs(value.toString()).format("YYYY"))
              }
            }}
          />
        </>
      </Row>
    </div>
  )
  return (
    <>
      <NavBar
        back={"返回"}
        style={{position: 'fixed', top: 0, left: 0, width: '100%', zIndex: 9999, backgroundColor: '#f5f5f5'}}
        onBack={()=>history.back()}
        right={right}
      >
        <div style={{fontSize: 16}}>首页</div>
      </NavBar>
      <GridContent style={{marginTop: 15}}>
        <>
          <Suspense fallback={<PageLoading />}>
            <Col xl={24} lg={24} md={24} sm={24} xs={24}
                 style={{
                   marginBottom: 15,
                   marginRight: 20,
                   marginLeft: 20,
                   position: "fixed",
                   width: `calc(100vw - 40px)`,
                   zIndex: 999,
                   backgroundColor: "white"
            }}
            >
            </Col>
            <div style={{height: 30}}/>
            <Row gutter={24} style={{backgroundColor:"#f5f5f5", padding: 3}}>
              <Col {...topColResponsiveProps} style={{paddingBottom: 4}}>
                <ProCard
                  title={"年度总收入"}
                  bordered
                  style={{width: `calc(100vw / 2 - 6px)`}}
                >
                  <span
                    style={{
                      color: 'red',
                      fontSize: 22,
                      fontWeight: 'bold',
                    }}
                  >
                    {`¥ ${numeral(data.topCard?.totalIncome || 0).format('0,0.00')}`}
                  </span>
                </ProCard>
              </Col>
              <Col {...topColResponsiveProps} style={{paddingBottom: 4, marginLeft: -12}}>
                <ProCard
                  title={<span style={{color: "green"}}>年度总支出</span>}
                  bordered
                  style={{width: `calc(100vw / 2 - 6px)`}}
                >
                  <span
                    style={{
                      color: 'green',
                      fontSize: 22,
                      fontWeight: 'bold',
                    }}
                  >
                    {`¥ ${numeral(data.topCard?.totalPayment || 0).format('0,0.00')}`}
                  </span>
                </ProCard>
              </Col>
              <Col {...topColResponsiveProps}>
                <ProCard
                  title={<span style={{color: "green"}}>欠别人的</span>}
                  bordered
                  style={{width: `calc(100vw / 2 - 6px)`}}
                >
                  <span
                    style={{
                      color: 'green',
                      fontSize: 22,
                      fontWeight: 'bold',
                    }}
                  >
                    {`¥ ${numeral(data.topCard?.totalOwe || 0).format('0,0.00')}`}
                  </span>
                </ProCard>
              </Col>
              <Col {...topColResponsiveProps} style={{marginLeft: -12}}>
                <ProCard
                  title={"借出去的"}
                  bordered
                  style={{width: `calc(100vw / 2 - 6px)`}}
                >
                  <span
                    style={{
                      color: 'red',
                      fontSize: 22,
                      fontWeight: 'bold',
                    }}
                  >
                    {`¥ ${numeral(data.topCard?.totalLend || 0).format('0,0.00')}`}
                  </span>
                </ProCard>
              </Col>
            </Row>
          </Suspense>
          <Row gutter={24} style={{marginTop: 5}}>
            <Col xl={16} lg={24} md={24} sm={24} xs={24}>
              <Card
                title="本周收支"
                bordered={false}
                style={{height: 300 }}
                headStyle={{backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
              >
                <ThisWeekChart/>
              </Card>
            </Col>
            <Col xl={8} lg={24} md={24} sm={24} xs={24}>
              <Card
                bordered={false}
                style={{height: 280, marginLeft: -10 }}
              >
                <Row gutter={24} style={{padding: 3}}>
                  <Col {...topColResponsiveProps} style={{paddingBottom: 4, marginLeft: -12}}>
                    <ProCard
                      title={"本周收入合计"}
                      bordered
                      style={{width: `calc(100vw / 2 - 6px)`}}
                    >
                      <span
                        style={{
                          color: 'red',
                          fontSize: 22,
                          fontWeight: 'bold',
                        }}
                      >
                        {`¥ ${numeral(data.thisWeek.totalIncome || 0).format('0,0.00')}`}
                      </span>
                    </ProCard>
                  </Col>
                  <Col {...topColResponsiveProps} style={{paddingBottom: 4, paddingLeft:18}}>
                    <ProCard
                      title={<span style={{color: "green"}}>本周支出合计</span>}
                      bordered
                      style={{width: `calc(100vw / 2 - 6px)`}}
                    >
                      <span
                        style={{
                          color: 'green',
                          fontSize: 22,
                          fontWeight: 'bold',
                        }}
                      >
                        {`¥ ${numeral(data.thisWeek.totalPayment || 0).format('0,0.00')}`}
                      </span>
                    </ProCard>
                  </Col>
                </Row>
                <Row gutter={24} style={{padding: 3}}>
                  <Col {...topColResponsiveProps} style={{paddingBottom: 4, marginLeft: -12}}>
                    <ProCard
                      title={"本月收入合计"}
                      bordered
                      style={{width: `calc(100vw / 2 - 6px)`}}
                    >
                      <span
                        style={{
                          color: 'red',
                          fontSize: 22,
                          fontWeight: 'bold',
                        }}
                      >
                        {`¥ ${numeral(data.thisMonth.totalIncome || 0).format('0,0.00')}`}
                      </span>
                    </ProCard>
                  </Col>
                  <Col {...topColResponsiveProps} style={{paddingBottom: 4, paddingLeft:18}}>
                    <ProCard
                      title={<span style={{color: "green"}}>本月支出合计</span>}
                      bordered
                      style={{width: `calc(100vw / 2 - 6px)`}}
                    >
                      <span
                        style={{
                          color: 'green',
                          fontSize: 22,
                          fontWeight: 'bold',
                        }}
                      >
                        {`¥ ${numeral(data.thisMonth.totalPayment || 0).format('0,0.00')}`}
                      </span>
                    </ProCard>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "green", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${monthStr} 分类支出`}
                bordered={false}
                style={{ marginBottom: 24, height: 450 }}
              >
                <MonthPaymentPieChart month={month}/>
              </Card>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "green", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${monthStr} 成员支出`}
                bordered={false}
                style={{ marginBottom: 24, height: 350 }}
              >
                <MonthFamilyPaymentPieChart month={month}/>
              </Card>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "red", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${monthStr} 收入`}
                bordered={false}
                style={{ marginBottom: 24, height: 350 }}
              >
                <MonthIncomeTypePieChart month={month}/>
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "green", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${year}年 分类支出`}
                bordered={false}
                style={{ marginBottom: 24, height: 450 }}
              >
                <YearPaymentPieChart year={year}/>
              </Card>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "green", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${year}年 成员支出`}
                bordered={false}
                style={{ marginBottom: 24, height: 350 }}
              >
                <YearFamilyPaymentPieChart year={year}/>
              </Card>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card
                headStyle={{color: "red", backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                title={`${year} 年收入`}
                bordered={false}
                style={{ marginBottom: 24, height: 350 }}
              >
                {/*<IncomeTypePieChart year={year}/>*/}
                <IncomeTypeBarChart year={year}/>
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
              <Card
                title={`${monthStr} 收支`}
                bordered={false}
                headStyle={{backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                style={{ marginBottom: 24, height: 350 }}
                extra={
                  <DatePicker
                    style={{borderRadius: 30}}
                    picker={"month"}
                    // @ts-ignore
                    value={dayjs(month, monthFormatStr)}
                    format={monthFormatStr}
                    onChange={(value)=> {
                      if(value){
                        setMonthStr(dayjs(value.toString()).format(monthFormatStr))
                        setMonth(dayjs(value.toString()).format(monthFormat))
                      }
                    }}
                  />
                }
              >
                <MonthlyChart month={month}/>
              </Card>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
              <Card
                title={`${year} 年度收支`}
                headStyle={{backgroundColor: "#91d5ff", borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                bordered={false}
                style={{ marginBottom: 24, height: 350 }}
                extra={
                  <DatePicker
                    style={{borderRadius: 30}}
                    picker={"year"}
                    // @ts-ignore
                    value={dayjs(year, 'YYYY')}
                    onChange={((value)=> {
                      if (value) {
                      setYear(dayjs(value.toString()).format("YYYY"))
                      }
                    })}
                  />
                }
              >
                <YearlyChart year={year}/>
              </Card>
            </Col>
          </Row>
        </>
      </GridContent>
      {/*页脚导航*/}
      <CustomTabs/>
    </>
  );
};

export default Monitor;
